<template>
  <div class="employee">
    <Modal id="aaa" :value="showModal" width="634" @on-ok="ok" @on-cancel="cancel"
      @on-visible-change="visibleChange">
      <template slot="header">
        <span>编辑部门</span>
      </template>
      <Form :model="formLeft" label-position="left" :label-width="100">
        <FormItem label="姓名">
          <Input v-model="formLeft.input1" style="width:360px" placeholder="1-30个字符" />
        </FormItem>
        <FormItem label="手机">
          <Input v-model="formLeft.input2" style="width:300px" placeholder="请输入手机号" />
        </FormItem>
        <FormItem label="入职时间">
          <Col span="12">
          <DatePicker type="date" :options="options3" placeholder="请选择日期" style="width: 200px" />
          </Col>
        </FormItem>
        <FormItem label="聘用形式" prop="city">
          <Select placeholder="请选择" style="width:216px">
            <Option value="beijing">New York</Option>
            <Option value="shanghai">London</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
export default {
  name: 'Employee',
  props: {
    showModal: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formLeft: {
        input1: '',
        input2: '',
        input3: ''
      },
      options3: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000;
        }
      },
      city: '',
    }
  },

  methods: {
    ok () {
      this.$emit('handleShowModal', false)
      this.$Message.info('Clicked ok');
    },
    cancel () {
      this.$emit('handleShowModal', false)
      this.$Message.info('Clicked cancel');
    },
    visibleChange (val) {
      // this.$emit('handleShowModal', false)

      console.log("@@@@@@@" + val)
    }
  }
}
</script>

<style scoped lang="scss">
#aaa {
  ::v-deep .ivu-modal-header {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: rgb(102, 177, 255);
    span {
      color: #fff;
      font-size: 18px;
    }
  }
}
</style>
